<template>
  <div class="table-list" v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      placeholder="请输入消息标题"
      :pageInfo="pager"
      :listData="tableData"
      :selectData="selectionList"
      searchName="messageHeader"
      :menuList="['delete',{read: '已读'}]"
      @menu-click="handleMenuClick"
    >
      <el-table :data="tableData" align="left" ref="multipleTable" @selection-change="$event => (selectionList = $event)">
        <el-table-column type="selection" width="50" />
        <el-table-column label="消息标题" prop="messageHeader" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.messageHeader}}
            <img :src="NewIcon" class="imgIcon" v-if="scope.row.smsStatus == '0'" />
          </template>
        </el-table-column>
        <el-table-column label="消息类型" prop="messageType" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.messageType === '0'" class="messageType">普通</span>
            <span v-else class="messageType messageTypeTwo">紧急</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createName" width="160" show-overflow-tooltip />
        <el-table-column label="接收人" prop="receiveName" width="160" show-overflow-tooltip />
        <el-table-column label="创建日期" prop="createTime" width="160" />
        <el-table-column label="状态" prop="smsStatus" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.smsStatus === '1'">已读</span>
            <span v-else>未读</span>
          </template>
        </el-table-column>
        <el-table-column width="120" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleLook(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
  </div>
</template>

<script>
import { messagePage, batchDeleteSysInfo, batchReadSysInfo } from '../api/message'
import dbl from '@/utils/dbl'
export default {
  name: "message-table",
  provide () {
    return {
      initList: this.getListData
    };
  },
  data () {
    return {
      loading: false,
      tableData: [],
      selectionList: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        messageHeader: "",
        status: this.messageType
      },
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20 // 每页显示多少条
      },
      userId: '',
      NewIcon: require('@/assets/images/new.png'), //我的消息new图标
    }
  },
  methods: {
    // hxf-0922-分页
    getListData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      messagePage(requestData)
        .then(res => {
          const { current, size, total, records } = res.data.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // hxf-0922-删除
    handleDelete () {
      let msgId = []
      this.selectionList.map(item => {
        msgId.push(item.msgId)
      })
      if (msgId.length > 0) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            batchDeleteSysInfo(msgId)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.$emit('myUpdate')
                this.getListData();
              })
              .catch((e) => {
                this.$message({
                  type: "success",
                  message: "删除失败!",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          })
      } else {
        this.$message.error('请选择需要删除的数据！')
      }
    },
    // hxf-0922-已读
    handleHaveRead () {
      let msgId = []
      this.selectionList.map(item => {
        msgId.push(item.msgId)
      })
      if (msgId.length > 0) {
        this.$confirm("是否确认已读?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            batchReadSysInfo(msgId)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit('myUpdate')
                this.getListData();
              })
              .catch((e) => {
                this.$message({
                  type: "success",
                  message: "操作失败!",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消已读",
            });
          })
      } else {
        this.$message.error('请选择已确认阅读的数据！')
      }
    },
    // hxf-0923-查看
    handleLook (row) {
      this.$router.push({ name: 'message_details', query: { 'msgId': row.msgId } })
    },
    // 菜单点击监听
    handleMenuClick (type) {
      switch (type) {
        case "delete":
          this.handleDelete();
          break;
        case "read":
          this.handleHaveRead();
          break;
        default:
          this.$message(type);
          break;
      }
    }
  },
  props: {
    messageType: {
      type: String,
      default: "1"
    }
  },
  created () {
    this.userId = dbl.get('user').userId
  },
  mounted () {
    this.getListData()
  }
}
</script>

<style scoped lang="scss">
.table-list {
  padding: 16px 32px;
  .messageType {
    line-height: 1.2;
    font-size: 85%;
    padding: 0.25em 0.4em;
    background-color: #1563d1;
    color: #fff;
  }
  .messageTypeTwo {
    background-color: #dc3545;
  }
  .imgIcon {
    width: 28px;
    height: 26px;
    margin-left: 10px;
  }
}
</style>
